<template>
  <div style="padding: 0 24px">
    <!--应用信息表头-->
    <div>
      <a-page-header @back="() => {}">
        <template #title>
          <span :title="softwareName" class="pointer">{{softwareName}}</span>
          <div class="app-description">Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目</div>
        </template>
        <template #backIcon>
          <img src='../../assets/tomcat.png' :alt='softwareName' width="48"/>
        </template>
        <template #extra>
          <a-button type="primary" icon="download" @click="onSubmit">安装</a-button>
        </template>
      </a-page-header>
    </div>
    <!--基本信息选项-->
    <a-form-model ref="ruleForm"
                  :model="form"
                  :rules="rules">
    <a-row :gutter="36" style="padding: 0 24px">
      <h2 style="padding-left: 18px">基本信息</h2>
      <a-col :span="12">
        <a-form-model-item
          label="应用名称"
          prop="appName"
        >
          <a-input v-model="form.appName" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="应用版本"
          prop="appVersion"
        >
          <a-select v-model="form.appVersion" style="width: 100%">
            <a-select-option v-for="item in versionList" :key="item.value">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="描述信息"
          prop="description"
        >
          <a-textarea v-model="form.description" :autoSize="{ minRows: 3, maxRows: 5 }"/>
        </a-form-model-item>
      </a-col>
    </a-row>
    <!--部署位置选项-->
    <h2 style="padding-left: 24px">部署位置</h2>
    <a-row :gutter="36" style="padding: 0 24px">
      <a-col :span="12">
        <a-form-model-item
          label="部署机器"
          prop="machineId"
        >
          <a-select style="width: 100%" v-model="form.machineId">
            <a-icon slot="suffixIcon" type="project" />
            <a-select-option v-for="item in machineList" :key="item.value">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="企业空间"
          prop="space"
        >
          <a-select style="width: 100%">
            <a-icon slot="suffixIcon" type="database" />
            <a-select-option value="demo-workspace">demo-workspace</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="集群"
          prop="cluster"
        >
          <a-select style="width: 100%">
            <a-icon slot="suffixIcon" type="deployment-unit" />
            <a-select-option value="host">host</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    </a-form-model>
  </div>
</template>

<script>
  export default {
    name: "SoftwareInstall",

    data() {
      return {
        softwareName: 'Tomcat',
        form: {
          appName: '',
          appVersion: '',
          description: '',
          space: '',
          cluster: '',
          machineId: ''
        },
        rules: {
          appName: [{required: true, message: '请输入名称', trigger: 'blur'},],
          appVersion: [{required: true, message: '请选择版本', trigger: 'change'}],
          machineId: [{required: true, message: '请选择项目', trigger: 'change'}],
        },
        machineList: [],
        versionList: [{value: 'version 1.1.1', label: 'version 1.1.1'}]
      }
    },

    methods: {
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$api.installApp({
              appName: this.form.appName,
              appVersion: encodeURIComponent(this.form.appVersion),
              machineId: this.form.machineId
            }).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getMachineList() {
        this.$api.getMachineList({
          page: 1,
          limit: 100
        }).then(({ data }) => {
          this.machineList = data.value.map(item => {
            return {
              value: item.id,
              label: item.name
            }
          })
        }).catch(() => {
          console.log('err')
        })
      },
    },
    mounted() {
      this.getMachineList();
    }
  }
</script>

<style scoped>
  /deep/ .ant-form-item-label {
    line-height: 20px;
  }
  /deep/ .ant-form-item {
    font-size: 13px;
  }
  .app-description {
    font-size: 13px;
    color: #79879c;
    font-weight: normal;
    line-height: 13px;
  }
  /deep/ .ant-page-header-heading-title {
    width: 50%;
  }
</style>
